<template>
  <div class="ct05RankingList-swiper-container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- <slot></slot> -->
          <div class="swiper-slide" v-for="(item,index) in pastUserBg " :key="item+index"
             :style="`background:url(${item}) no-repeat 100%/100%;`"
          >
            <slot></slot>
          </div>
        </div>
          <!-- 如果需要分页器 -->
      </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import "./swiper-4.2.2.min.css";
import { Swiper } from "./swiper-4.2.2.min.js";
export default {
  name: "Sp",
  props: {
    pastUserBg: {
      type: Array,
      default() {
        return [];
      }
    },
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    this._intSwiper();
  },
  methods: {
    _intSwiper() {
      let options = this.options;
      console.log(options);
      setTimeout(() => {
        var mySwiper = new Swiper(".swiper-container", {
          loop: options.loop || true,
          autoplay: options.autoplay || {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination"
          }
        });
      }, 1000);
    }
  }
};
</script>
style.<style lang="scss">
.ct05RankingList-swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
  > .swiper-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  > .swiper-pagination {
    left: 50%;
    bottom: -70px;
    transform: translateX(-50%);
    display: flex;
    width: 400px;
    justify-content: center;
    > span {
      flex: 0 1 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 10px;
      &:last-child {
        margin: 0;
      }
    }
  }
}
</style>



